<template>
  <div class="vb-approve-process">
    <div class="approve-steps">
      <div v-for="(ap,index) in approveList" :key="ap.id" class="approve-step">
        <div :class="['step-top',activeIndex>index?'is-active':'',approveList.length===(index+1)?'last-one':'']">
          <i v-if="ap.status==='start'" class="el-icon-s-promotion step-icon" />
          <i v-else-if="ap.status==='end'" class="step-icon-end el-icon-circle-check step-icon" />
          <i v-else-if="ap.status==='0'" class="el-icon-s-check step-icon" />
          <i v-else-if="ap.staus==='copy'" class="el-icon-s-custom step-icon" />
          <i v-else-if="ap.status==='2'|| ap.status==='4'||ap.status==='3'" class="el-icon-circle-close step-icon" />
          <i v-else class="el-icon-circle-check step-icon" />

          <div class="step-top-title">{{ ap.name }}{{ ap.statusText?`(${ap.statusText})`:'' }}</div>
          <div class="step-line" />
          <div class="arrow-right">
            <i class="el-icon-caret-right" />
          </div>
        </div>
        <div class="step-content">
          <div v-if="ap.role" class="step-content-row">
            <span>角色：</span>
            <span class="content">{{ ap.role }}</span>
          </div>
          <div v-if="ap.position" class="step-content-row">
            <span>职位：</span>
            <span class="content">{{ ap.position }}</span>
          </div>
          <div v-if="ap.actionTime" class="step-content-row">
            <span>审核时间：</span>
            <span class="content">{{ ap.date | dateFormat }}</span>
          </div>
          <div v-if="ap.status==='start'" class="step-content-row">
            <span>提交时间：</span>
            <span class="content">{{ ap.date | dateFormat }}</span>
          </div>
          <div v-if="ap.content" class="step-content-row">
            <span>审批意见：</span>
            <span class="content">{{ ap.content }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getApproveDetailById } from '@/api/approve'
import { getOldToken } from '@/utils/auth'
import { getEnumText } from '@/utils/enums'
import { approveStatus } from './enum'

export default {
  name: 'VbApproveProcess',
  props: {
    type: {
      type: String,
      default: ''
    },
    extId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      approveList: [],
      activeIndex: 0
    }
  },
  mounted() {
    const data = {
      'extId': this.extId,
      'oldToken': getOldToken(),
      'type': this.type
    }
    getApproveDetailById(data).then(res => {
      let t = new Date().getTime()
      // 发起人
      const initiator = res.initiator
      if (initiator) {
        t = t + 1
        this.approveList.push({
          id: t,
          statusText: '发起人',
          status: 'start',
          name: initiator.staffName,
          position: initiator.position,
          date: initiator.createDate,
          role: initiator.roleName,
          staffId: initiator.staffId
        })
      }
      const links = res.links
      if (links && links.length > 0) {
        links.forEach(l => {
          l.members.forEach(m => {
            t = t + 1
            this.approveList.push({
              id: t,
              statusText: getEnumText(approveStatus, m.status),
              name: m.staffName,
              position: m.position,
              date: m.createDate,
              role: m.roleName,
              staffId: m.staffId,
              status: m.status,
              actionTime: m.actionTime,
              content: m.content

            })
          })
        })
      }
      const copyLink = res.copyLink
      if (copyLink && copyLink.length > 0) {
        copyLink.forEach(cp => {
          if (cp.members) {
            cp.members.forEach(m => {
              t = t + 1
              this.approveList.push({
                id: t,
                statusText: '抄送',
                status: 'copy',
                name: m.staffName,
                position: m.position,
                date: m.createDate,
                role: m.roleName,
                staffId: m.staffId
              })
            })
          }
        })
      }
      // 插入结束节点
      t = t + 1
      this.approveList.push({
        id: t,
        statusText: '',
        status: 'end',
        name: '结束'
      })
      var index = this.approveList.findIndex(f => f.status === '0')

      if (index > 0) {
        this.activeIndex = index
      } else {
        this.activeIndex = this.approveList.length
      }
      console.log(' this.approveList:', this.approveList, this.activeIndex)
    })
  }
}
</script>
<style lang="scss">
.vb-approve-process{
  .approve-steps{
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-y: auto;
    padding-bottom: 20px;
    .approve-step{
      width: 200px;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;

      .step-top{
        display: flex;
        align-items: center;
        position: relative;
        &.is-active{
          .step-line{
            background-color: #67c23a;
          }
          .arrow-right{
            .el-icon-caret-right{
              color:  #67c23a;
            }
          }
        }
        i.step-icon{
          font-size: 20px;
          margin-left: 5px;
          color: #666;
        }

        .step-top-title{
          padding: 0 5px;
        }
        &.last-one{
          .step-line,.arrow-right{
            display: none;
          }
        }
        &.is-active{
           i.step-icon{
             color:#67c23a;
           }
            i.el-icon-circle-close{
            color:#F56C6C;
          }
          i.el-icon-s-check{
            color: #E6A23C;
          }
          .step-top-title{
            color:#67c23a ;
          }

        }

      }
      .step-line{
        height: 2px;
        background-color: #666;
        flex: 1;

      }
      .arrow-right{
          height: 20px;
          width: 20px;
          display :inline-block;
          position: absolute;
          display: flex;
          align-items: center;
          right: 0;
           top: 50%;
           transform: translateY(-50%);
           .el-icon-caret-right{
             font-size: 28px;
             color:  #666;
           }
        }
        .step-content{
          padding-top: 20px;
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          .step-content-row{
            display: flex;
            flex-direction: column;
            padding-bottom: 10px;
            .content{
              color: #666;
            }
          }
        }

      }

    }
  }

</style>
